<template>
<div>
  <div>
    <el-page-header @back="goBack" content="商品管理">
    </el-page-header>
    <el-button type="primary" size="small" @click="dialogFormVisible=true;title='添加商品'">添加</el-button>
  </div>
  <el-table
    :data="goodslist" 
    height="550"
    row-key="id"
    border
    stripe
    :tree-props="{children: 'children'}">
    <el-table-column
      prop="id"
      label="商品编号"
      width="150">
    </el-table-column>
    <el-table-column
      prop="goodsname"
      label="商品名称"
      width="220">
    </el-table-column>
    <el-table-column
      prop="price"
      label="商品价格"
      width="220">
    </el-table-column>
        <el-table-column
      prop="market_price"
      label="市场价格"
      width="220">
    </el-table-column>
    <el-table-column label="图片"
      width="220">
      <template slot-scope="item">
        <div>
          <img v-if="item.row.img" :src="item.row.img" style="width: 100px">
        </div>
      </template>
    </el-table-column>
    <el-table-column
      prop="isnew"
      label="是否新品"
      width="120">
    </el-table-column>
    <el-table-column
      prop="ishot"
      label="是否热卖"
      width="120">
    </el-table-column>
    <el-table-column
      prop="status"
      label="状态"
      width="220">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="220">
      <template slot-scope="item">
        <el-button 
          @click.native.prevent="editGoods(item.row.id)"
          type="primary"
          icon="el-icon-edit"
          size="small">
        </el-button>

        <el-button
          @click.native.prevent="deleteRow(item.row.id)"
          type="danger"
          icon="el-icon-delete"
          size="small">
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="resetForm">
    <el-form :model="form" ref="form">
      <el-form-item label="一级分类" :label-width="formLabelWidth">
        <el-select v-model="form.first_cateid" placeholder="请选择">
          <el-option 
            v-for="item in catelist"
            :key="item.id"
            :label="item.title"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="二级分类" :label-width="formLabelWidth">
        <el-select v-model="form.second_cateid" placeholder="请选择">
          <el-option 
            v-for="item in catelist"
            :key="item.id"
            :label="item.title"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>      

      <el-form-item label="商品名称" :label-width="formLabelWidth">
        <el-input v-model="form.goodsname" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="价格" :label-width="formLabelWidth">
        <el-input v-model="form.goodsname" autocomplete="off"></el-input>
      </el-form-item>      

      <el-form-item label="市场价格" :label-width="formLabelWidth">
        <el-input v-model="form.goodsname" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="图片" :label-width="formLabelWidth">
        <el-upload
          action="#"
          list-type="picture-card"
          :on-remove="handleRemove"
          :on-change="handleChange"
          :auto-upload="false"
          :file-list="filelist">
          <i class="el-icon-plus"></i> 
        </el-upload>
      </el-form-item>

      <el-form-item label="商品规格" :label-width="formLabelWidth" prop="pid">
        <el-select v-model="form.specsid" placeholder="请选择">
          <el-option 
            v-for="item in specslist"
            :key="item.id"
            :label="item.title"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="规格属性" :label-width="formLabelWidth" prop="pid">
        <el-select v-model="form.specsattr" placeholder="请选择">
          <el-option 
            v-for="item in specslist"
            :key="item.id"
            :label="item.title"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="是否新品" :label-width="formLabelWidth">
        <el-radio-group v-model="form.isnew">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="2">否</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="是否热卖" :label-width="formLabelWidth">
        <el-radio-group v-model="form.ishot">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="2">否</el-radio>
        </el-radio-group>
      </el-form-item>
  
      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-switch
          v-model="form.status"
          active-value="1"
          inactive-value="2">
        </el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible=false">取 消</el-button>
      <el-button type="primary" @click.native.prevent="addGoods">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
// 引入辅助性函数
import { mapGetters, mapActions } from 'vuex'

// 引入接口
import { goodsAdd, goodsDelete, goodsInfo, goodsEdit } from '../request/api.js'

export default {
  name: 'Productgoods',
  computed: {
    ...mapGetters({
      goodslist: 'menu/getGoods',
      specslist: 'menu/getSpecs',
      catelist: 'menu/getCate'
    })
  },
  methods: {
    goBack() {
      this.$router.push('home')
    },
    resetForm() {
      this.dialogFormVisible = false
      this.form = {
        first_cateid: 0,
        second_cateid: 0,
        goodsname: '', 
        price: 0,
        market_price: 0,
        img: '',
        description: '',
        specsid: '',
        specsattr: '',
        isnew: 1,
        ishot: 1,
        status: 1 //状态   1正常2禁用
      }
      this.filelist = []
    },
    handleChange(file, fileList) {
      this.form.img = file.raw
    },
    handleRemove(file, fileList) {  
      console.log(this.form)
    },
    addGoods() {
      this.dialogFormVisible=false
      //this.$refs.form.validate((val) => {
      //  if(val) {
        console.log(this.form)
          let file = new FormData()
          for (let i in this.form) {
            file.append(i, this.form[i])
          }
          if(this.isAdd){
            // 调用添加接口  
            goodsAdd(file).then(res => {
              if(res.data.code == 200) {
                this.$message.success(res.data.msg)
                // 添加成功后重新调用列表接口
                this.getGoods()
              } else {
                this.$message.error(res.data.msg)
              }
              this.resetForm('form')
            })
          } else {
            goodsEdit(file).then((res) => {
              if(res.data.code == 200) {
                this.$message.success(res.data.msg)
                // 重新调用列表接口
                this.getGoods()
              } else {
                this.$message.error(res.data.msg)
              }
                this.resetForm('form')
            })
          }
    //    } else {
    //        console.log('失败')
    //    }
    //  })
    },
    editGoods(id) {
      this.dialogFormVisible = true
      this.title = '编辑商品'
      this.isAdd = false
      goodsInfo({ id }).then(res => {
        this.form = res.data.list
        this.filelist = [{url:res.data.list.img}]
      })
    },
    deleteRow(id) {
      goodsDelete({ id }).then(res => {
        if(res.data.code == 200) {
          this.$message.success(res.data.msg)
          this.getGoods()
        } else {
          this.$message.error(res.data.msg)
        }
      })  
    },
    ...mapActions({
      getGoods: 'menu/getGoodsAction',
      getSpecs: 'menu/getSpecsAction',
      getCate: 'menu/getCateAction'
    }),
  },
  data() {
    return {
      filelist: [],
      dialogFormVisible: false,
      formLabelWidth: '120px',
      title: '添加角色',
      isAdd: true,
      form: {
        first_cateid: 0,
        second_cateid: 0,
        goodsname: '', 
        price: 0,
        market_price: 0,
        img: '',
        description: '',
        specsid: '',
        specsattr: '',
        isnew: 1,
        ishot: 1,
        status: 1
      },
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      dynamicValidateForm: {
        domains: [{
          value: ''
        }]
      }
    }
  },
  mounted() {
    this.getGoods()
    this.getSpecs()
    this.getCate()
  }
}
</script>

<style scoped>
</style>